.data {

    /// height: calc(var(--app-height) - 60px);
    // overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 1rem;
    // min-height: var(--app-height);
    padding: 1rem;
    // grid-row-gap: 25px;
    // animation: slideY 0.6s both;

    //display: none;
    @media screen and (max-width: 1212px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media screen and (max-width: 930px) {
        grid-template-columns: 1fr;
        padding: 0 1rem;

        // padding-bottom: calc(env(safe-area-inset-bottom) + 140px);

    }


}



.user {

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1rem;

    .name {
        flex-grow: 1;
    }

    &-settings {
        display: grid;
        place-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--background-color-3);
        border-radius: 50%;

        i {
            font-size: 1.5rem;
        }
    }
}

.search-toolbar {
    position: sticky;
    top: 0px;
    padding: 0px 15px;
    background-color: var(--background-color);
    z-index: 7;
    padding-top: env(safe-area-inset-top);
}

.search-input {
    height: 50px;
    margin: 10px 0px;
    font-size: 1rem;

    &::placeholder {
        color: var(--foreground-color);
    }

    padding: 0.8rem 1rem;
    background-color: var(--background-color-3);
    border: 0;
    transition: color 0.3s ease-out,
    background-color 0.3s ease-out,
    box-shadow 0.2s ease-out;
    color: var(--foreground-color);
    width: 100%;
    border-radius: 50px;
    // box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
    // border: 1px solid var(--border-color);

    &:hover,
    &:focus {
        outline: none;

        background-color: var(--background-color-3);
        color: var(--foreground-color);
        // box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    }
}

.bub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-template-rows: masonry;
    /* this will do the magic */
    grid-gap: 10px;


    .bubble {
        position: relative;
        display: grid;
        place-content: center;

        img {
            border-radius: 15px;
            border: 2px solid transparent;
            transition: all ease-in-out .3s;
            box-shadow:
                0 15px 35px rgba(0, 0, 0, 0.1),
                0 3px 10px rgba(0, 0, 0, 0.1);
        }


        .text {
            position: absolute;
            background: #131313 !important;
            white-space: nowrap;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            top: 70px;
            color: white;
            transform-origin: center left;
            display: none;
            z-index: 16;


            &:before {
                content: "";
                display: block;
                width: 12px;
                height: 12px;
                position: absolute;
                background-color: #131313;
                top: -5px;
                left: 50%;
                transform: translateX(-50%) rotate(45deg);
                border-radius: 3px;
            }

            margin-top: 15px;
        }

        &:hover {
            img {


                border: 2px solid salmon;
            }

            .text {
                display: block;
                animation: fadeInShow .1s;

            }

        }


    }
}

.dropdown-item {
    display: flex;
    align-items: center;

    i {
        margin-left: auto;
        font-size: 1.5rem;
    }
}


.bubbles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;

    width: 100%;
    gap: 1rem;
    padding: 0 1rem;


    @media screen and (max-width: 1000px) {
        grid-template-columns: repeat(2, 1fr);
    }

    .bubble {

        flex-grow: 1;
        flex-basis: 0;


        text-align: center;

        h1 {
            font-weight: 800;
            text-transform: uppercase;
            font-size: 1.2rem;
            margin: 0px;
        }

        p {
            margin: 0px;

        }
    }
}


.rows {

    /// height: calc(var(--app-height) - 60px);
    // overflow: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    // min-height: var(--app-height);
    padding: 1rem;
    max-width: 100vw;
    // grid-row-gap: 25px;
    // animation: slideY 0.6s both;

    //display: none;

    @media screen and (max-width: 930px) {
        grid-template-columns: 1fr;

        // padding-bottom: calc(env(safe-area-inset-bottom) + 140px);

    }


}

.charts {
    display: flex;
    flex-direction: column;
    // gap: 1rem;

    .bar {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        position: relative;
        border-radius: 5px;

        &+.bar {
            border-top: 1px solid var(--border-color);
        }

        padding: 1rem 0;

        .label {
            z-index: 6;
        }

        .count {
            margin-left: auto;
            z-index: 6;
            font-size: 12px;

        }

    }
}

.card {
    h3 {
        margin: 0px;
        margin-bottom: 1.5rem;
    }
}

canvas {
    max-width: 100%;
}

.list-item {
    padding: 1rem 0;

    &+.list-item {
        border-top: 1px solid var(--border-color);
    }

    .text-lead {
        font-size: .9rem;
    }

    .text-meta {
        font-size: 1rem;

    }
}